<template>
	<view class="container">
		<TopNav></TopNav>
		<view class="flex flex-direction">
			<text class="f-w600 f-s30 line-height42">紧急联系人设置</text>
			<text class="text-gray f-w400 f-s14 line-height20 m-t16">设置紧急联系人，更好保障您的安全问题</text>
		</view>
		<view class="m-t26">
			<FormInput v-model="form.emergency_name" title="联系人姓名" placeholder="请输入联系人姓名"></FormInput>
			<FormInput v-model="form.emergency_mobile" title="联系人电话" :maxlength="11" placeholder="请输入联系人电话" class="m-t10"></FormInput>
		</view>
		<view class="self-btn full-width m-t80" hover-class="pressed" @click="handleSubmit">
			<text>提交</text>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import FormInput from '@/components/form-input'
	import {
		contactPerson
	} from '@/api/mine/setting.js'
	import {
		getInfo
	} from '@/api/login';
	export default {
		components: {
			FormInput
		},
		data() {
			return {
				form: {
					emergency_name: '',
					emergency_mobile: ''
				}
			};
		},
		onLoad() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				getInfo().then(res => {
					let {
						data: {
							info
						}
					} = res
					this.form.emergency_name = info?.emergency_name ?? ''
					this.form.emergency_mobile = info?.emergency_mobile ?? ''
				})
			},
			handleSubmit() {
				if (!this.form.emergency_name) {
					this.$toast("请输入联系人姓名")
					return
				} else {
					const chineseRegex = /^[\u4e00-\u9fa5]+$/;
					if (!chineseRegex.test(this.form.emergency_name)) {
						this.$toast('请输入真实姓名');
						return
					}
				}
				if (!this.form.emergency_mobile) {
					this.$toast("请输入联系人电话")
					return
				} else {
					// 正则表达式校验手机号格式
					const regex = /^1[3456789]\d{9}$/;
					if (!regex.test(this.form.emergency_mobile)) {
						this.$toast("电话格式不正确")
						return
					}
				}
				this.$modal.loading('设置中').then(() => {
					contactPerson(this.form).then(res => {
						this.$toast(res.msg)
						this.$modal.closeLoading()
					}).catch(() => this.$modal.closeLoading())
				})

			}
		}
	}
</script>


<style scoped lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		padding: 60rpx 32rpx;
		box-sizing: border-box;

		.m-t80 {
			margin-top: 160rpx;
		}
	}
</style>